<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/tentime"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style type="text/css">
        :focus {outline: -webkit-focus-ring-color auto 0px !important;}
        .layui-table-view {margin: 0px 0px !important;}
        .layui-form-item {margin-bottom: 0px!important;}
        .layui-form-label {padding: 5px 0px!important; width: 60px!important; text-align: left!important;}
    </style>
</head>
<body style="overflow-y: hidden;">
    <div class="layui-col-md12"><div class="layui-card">
        <form class="layui-form" action="" id="search_form">
            <div class="layui-card-body"><div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">门店名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" class="layui-input" id="name" placeholder="请输入">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">门店地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="address" class="layui-input" id="address" placeholder="请输入">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tel" class="layui-input" id="tel" placeholder="请输入手机/联系电话">
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="search"><i class="layui-icon layui-icon-search"></i>查询</button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm" id="reset" lay-filter="reset"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                </div>
            </div></div>
        </form>
        <table id="myTable" lay-filter="myTable"></table>
    </div>
</div>

<script type="text/html" id="toolbarGrid">
    <div class="layui-btn-container"><!--layui-btn-group-->
        <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add" shiro:hasPermission="cars:store:add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="del" shiro:hasPermission="cars:store:delete"><i class="layui-icon">&#xe640;</i>删除</a>
        <a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</a>
    </div>
</script>
<script type="text/html" id="toolbarCell">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" shiro:hasPermission="cars:store:edit"><i class="layui-icon">&#xe642;</i>修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail" shiro:hasPermission="cars:store::detail"><i class="layui-icon">&#xe714;</i>详情</a>
    </div>
</script>
<script th:replace="/common/template :: common"></script>
<script th:inline="javascript">
    // layui文档 : http://www.layui.com/doc/
    layui.use(['form', 'soulTable', 'table'], function () {
        var form = layui.form, table = layui.table, soulTable = layui.soulTable;
        var title = '店铺管理', winWidth = 750, winHeight = 460;
        var url = ctx + '/cars/store/';
        /* 渲染主表格*/
        var myTable = table.render({
            id: 'myTable'
            ,elem: '#myTable'
            ,url: url + 'listSoulTable'
            ,method: 'post'
            ,contentType: 'application/json'
            ,height: 'full-50'// $(document).height() - $('#myTable').offset().top //
            ,toolbar: '#toolbarGrid'
            //,sort: 'user_no'
            ,page: true
            ,limits: [20, 30, 50, 100, 200]
            ,limit: 20 //默认采用20
            ,cols: [
                [
                    {type: 'numbers', title: '序号', fixed: 'left'},
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'no', title: '店铺编号', width: 120, sort: true, filter: true},
                    {field: 'name', title: '店铺名称', width: 200, sort: true, filter: true},
                    {field: 'linkman', title: '联系人', width: 100, sort: true, filter: true},
                    {field: 'mobile', title: '手机', width: 120, sort: true, filter: true},
                    {field: 'tel', title: '电话', width: 120 , filter: true, sort: true},
                    {field: 'address', title: '地址', width: 150, filter: true, sort: true},
                    {field: 'trade', title: '所属行业', width: 110, filter: true, sort: true},
                    {field: 'scope', title: '经营范围', width: 150, filter: true, sort: true},
                    {field: 'create_by_name', title: '创建人', width: 123, filter: true, sort: true},
                    {field: 'create_date', title: '创建时间', width: 112, sort:true, filter: false, templet : "<div>{{layui.util.toDateString(d.create_date, 'yyyy-MM-dd')}}</div>"},
                    {title: '操作', width: 156, templet: '#toolbarCell',fixed: 'right'}
                ]
            ]
            ,rowDrag: {/*trigger: 'row',*/ done: function(obj) {}}
            , filter: {
                items:['column','condition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
                ,bottom: false //隐藏工具栏帅选条件
            }
            , done: function (res, curr, count) {
                soulTable.render(this)
            }
        });

        form.on('submit(search)', function (data) {
            search(data, myTable);
            return false;
        });
        // 导出
        form.on('submit(export)', function (data) {
            soulTable.export(myTable);
            return false;
        });
        // 顶部工具栏监听  头工具栏事件toolbar  监听行工具事件 tool
        table.on('toolbar(myTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id) ,datas = checkStatus.data; //获取选中的数据
            var len = checkStatus.data.length;
            if (obj.event === 'add') {//增加
                var url_add = url + 'storeForm';
                openWin(title, url_add, winWidth, winHeight);
            } else if (obj.event === 'refresh') {
                myTable.reload(); //这个方法刷新后，展开/收缩不起作用
            } else if (obj.event === 'del') {
                if (len == 0) {
                    layer.msg('请选择数据！', {icon: 2});
                } else {
                    layer.confirm('确定要删除吗？', function (index) {
                        var ids = [];
                        $.each(datas,function(idx,obj) {
                            ids.push(obj.id);
                        });
                        $.ajax({
                            type: 'post',
                            url: url + 'deleteEntity',
                            async: false,
                            data: {'ids': ids.toString(), 'param': 'delete'},
                            success: function (data) {
                                var code = data.code;
                                var msg = data.msg;
                                if (code == 200) {
                                    layer.msg('操作成功：' + msg, {icon: 1, time: 1000});
                                    myTable.reload();
                                } else {
                                    layer.msg('操作失败：' + msg, {icon: 2});
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            }
        });
        // 修改和删除
        table.on('tool(myTable)', function(obj) {
            var that = this;
            var data = obj.data; // 获得当前行数据
            var id = data.id;
            if (obj.event === 'detail') {//详情
                var url_detail = url + 'detail/' + id;
                openWin(title, url_detail, winWidth, winHeight);
            } else if (obj.event === 'edit') {//修改
                var url_edit = url + 'storeForm?id=' + id;
                openWin(title, url_edit, winWidth, winHeight);
            }
        });
        //监听行单击事件row(test)（双击事件为：rowDouble）
        table.on('rowDouble(myTable)', function(obj){
            var data = obj.data;
            var url_update = url + 'storeForm?id=' + data.id;
            openWin(title, url_update, winWidth, winHeight);
        });
        // 选中颜色背景
        table.on('checkbox(myTable)', function (obj) {
            selectRow('myTable', obj);
        });
        // 保存或更新后供子页面调用
        window.reloadTable = function() {
            myTable.reload();
        };

    });

</script>
</body>
</html>